<template>
  <transition enter-active-class="animate__fadeIn" leave-active-class="animate__fadeOut">
    <el-form v-show="showSearch" class="app-search" label-width="100px" ref="queryFormRef" :model="queryForm">
      <el-row>
        <slot></slot>
        <el-col :span="2" v-if="showButton">
          <el-button type="primary" plain icon="el-icon-search" @click="handleSearch" v-power="power"></el-button>
          <el-button type="info" plain icon="el-icon-refresh" @click="handleResetQuery"></el-button>
        </el-col>
      </el-row>
    </el-form>
  </transition>
</template>

<script setup>
import {ref} from "vue";

const emit = defineEmits(['handleSearch', 'handleResetQuery']);

const props = defineProps({
  showSearch: {
    type: Boolean,
    default: true,
  },
  queryForm: {
    type: Object,
    default: {}
  },
  power: {
    type: String,
    default: ""
  },
  showButton: {
    type: Boolean,
    default: true,
  },
});

const queryFormRef = ref(null);

const getQueryFormRef = () => {
  return queryFormRef.value;
}

const handleSearch = () => {
  emit('handleSearch')
}

const handleResetQuery = () => {
  emit('handleResetQuery')
}

defineExpose({getQueryFormRef});
</script>

<style scoped>
</style>